<template>
  <div class="welcome-container">
    <div class="welcome-content">
      <img src="../../assets/logo.svg" alt="皮影快闪" class="logo">
      <h1 class="title">欢迎使用皮影快闪</h1>
      <p class="subtitle">一款专业的皮影戏动画制作工具</p>

      <div class="action-buttons">
        <n-button type="primary" size="large" @click="goToProjects">
          <template #icon><n-icon>
              <FolderOpenOutline />
            </n-icon></template>
          开始项目
        </n-button>
        <n-button size="large" @click="goToTutorials">
          <template #icon><n-icon>
              <SchoolOutline />
            </n-icon></template>
          查看教程
        </n-button>
      </div>

      <div class="features-container">
        <div class="features-row">
          <div class="feature-item" v-for="(feature, index) in features.slice(0, 3)" :key="index">
            <n-icon size="24" :color="feature.color">
              <component :is="feature.icon" />
            </n-icon>
            <div class="feature-text">
              <h3>{{ feature.title }}</h3>
              <p>{{ feature.description }}</p>
            </div>
          </div>
        </div>
        <div class="features-row">
          <div class="feature-item" v-for="(feature, index) in features.slice(3)" :key="index + 3">
            <n-icon size="24" :color="feature.color">
              <component :is="feature.icon" />
            </n-icon>
            <div class="feature-text">
              <h3>{{ feature.title }}</h3>
              <p>{{ feature.description }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { NButton, NIcon } from 'naive-ui'
import {
  FolderOpenOutline,
  SchoolOutline,
  BrushOutline,
  FilmOutline,
  PhonePortraitOutline,
  CloudUploadOutline,
  FlashOutline
} from '@vicons/ionicons5'

const router = useRouter()

const goToProjects = () => {
  router.push('/projects')
}

const goToTutorials = () => {
  router.push('/tutorials')
}

const features = [
  {
    title: '简单易用',
    description: '直观的拖拽界面，零基础也能快速上手',
    icon: BrushOutline,
    color: '#6366f1'
  },
  {
    title: '专业动画',
    description: '骨骼动画系统，打造流畅自然的动画效果',
    icon: FilmOutline,
    color: '#f59e0b'
  },
  {
    title: '多平台支持',
    description: '支持Windows、macOS和Linux多平台使用',
    icon: PhonePortraitOutline,
    color: '#10b981'
  },
  {
    title: '云端同步',
    description: '项目自动备份，随时随地继续创作',
    icon: CloudUploadOutline,
    color: '#3b82f6'
  },
  {
    title: '皮影特效',
    description: '丰富的皮影戏特效库，一键应用传统艺术效果',
    icon: FlashOutline,
    color: '#ec4899'
  }
]
</script>

<style lang="scss" scoped>
.welcome-container {
  width: 100%;
  min-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 20px;
  overflow-y: auto;

  .welcome-content {
    max-width: 800px;
    text-align: center;
    animation: fadeIn 0.8s ease-out;

    .logo {
      width: 120px;
      height: 120px;
      margin-bottom: 24px;
    }

    .title {
      font-size: 32px;
      font-weight: 700;
      margin-bottom: 16px;
    }

    .subtitle {
      font-size: 18px;
      color: var(--text-color-secondary);
      margin-bottom: 40px;
    }

    .action-buttons {
      display: flex;
      justify-content: center;
      gap: 16px;
      margin-bottom: 40px;
    }

    .features-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;

      .features-row {
        grid-column: span 3;
        display: flex;
        gap: 16px;

        .feature-item {
          flex: 1;
          display: flex;
          align-items: flex-start;
          text-align: left;
          padding: 16px;
          border-radius: 8px;
          transition: transform 0.2s, box-shadow 0.2s;
          background-color: rgba(0, 0, 0, 0.02);

          &:hover {
            transform: translateY(-5px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
          }

          .feature-text {
            margin-left: 16px;

            h3 {
              font-size: 18px;
              font-weight: 600;
              margin-bottom: 8px;
            }

            p {
              font-size: 14px;
              color: var(--text-color-secondary);
              line-height: 1.5;
            }
          }
        }
      }
    }
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 768px) {
  .welcome-container {
    padding: 20px 10px;

    .welcome-content {
      .title {
        font-size: 28px;
      }

      .subtitle {
        font-size: 16px;
      }

      .action-buttons {
        flex-direction: column;
        gap: 12px;
        margin-bottom: 30px;
      }

      .features-container {
        grid-template-columns: 1fr;
        
        .features-row {
          grid-column: 1;
          flex-direction: column;
        }
      }
    }
  }
}

@media (max-height: 700px) {
  .welcome-container {
    padding-top: 20px;
    padding-bottom: 20px;

    .welcome-content {
      .logo {
        width: 80px;
        height: 80px;
        margin-bottom: 16px;
      }

      .title {
        font-size: 24px;
        margin-bottom: 8px;
      }

      .subtitle {
        font-size: 14px;
        margin-bottom: 20px;
      }

      .action-buttons {
        margin-bottom: 20px;
      }

      .features-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        
        .features-row {
          grid-column: span 2;
          gap: 10px;
          
          .feature-item {
            padding: 10px;
            
            .feature-text {
              h3 {
                font-size: 16px;
                margin-bottom: 4px;
              }
              
              p {
                font-size: 12px;
                line-height: 1.3;
              }
            }
          }
        }
      }
    }
  }
}

@media (max-height: 500px) {
  .welcome-container {
    padding: 10px;
    
    .welcome-content {
      .logo {
        width: 50px;
        height: 50px;
        margin-bottom: 10px;
      }
      
      .title {
        font-size: 20px;
        margin-bottom: 5px;
      }
      
      .subtitle {
        font-size: 12px;
        margin-bottom: 15px;
      }
      
      .action-buttons {
        margin-bottom: 15px;
        flex-direction: row;
        
        .n-button {
          font-size: 12px;
          padding: 4px 12px;
        }
      }
      
      .features-container {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        
        .features-row {
          grid-column: span 3;
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 8px;
          
          .feature-item {
            padding: 8px;
            
            .n-icon {
              font-size: 18px;
            }
            
            .feature-text {
              margin-left: 8px;
              
              h3 {
                font-size: 14px;
                margin-bottom: 2px;
              }
              
              p {
                font-size: 11px;
                line-height: 1.2;
              }
            }
          }
        }
      }
    }
  }
}
</style>